<template>
	<scroll-view scroll-y class="content">
		<!-- //还差一个水质的折线图
		//还差一个水质的折线图
		//还差一个水质的折线图
		//还差一个水质的折线图
		//还差一个水质的折线图 -->
		<!-- <view class="qiun-bg-white qiun-title-bar qiun-common-mt">
			<view class="qiun-title-dot-light">水厂流量（m³/s）</view>
		</view>
		<view class="qiun-charts">
			<canvas canvas-id="canvasColumn" id="canvasColumn" class="charts" :width="cWidth*pixelRatio" :height="cHeight*pixelRatio"
			 @touchstart="touchColumn" :style="{'width':cWidth+'px','height':cHeight+'px'}"></canvas>
		</view> -->
		<view style="display: flex;justify-content: center;font-size: 40rpx;font-weight: bold;color: #9197AE;">
			统计方式：
			<picker @change="typeChange" :value="typeIndex" :range="type">
				<view style="justify-content: center;display: flex;font-size: 40rpx;font-weight: bold;">
					{{type[typeIndex]}}
					<image src="../static/image/arrow_bottom.png" style="width: 28rpx;height: 20rpx;margin-top: 30rpx;" />
				</view>
			</picker>
			<picker :fields="!typeIndex?'year':typeIndex==1?'month':'day'" style="margin-left: 100rpx;" mode="date" :value="date"
			 :start="startDate" :end="endDate" @change="bindDateChange">
				<view class="uni-input" style="justify-content: center;display: flex;font-size: 40rpx;font-weight: bold;">
					{{date}}
					<image src="../static/image/arrow_bottom.png" style="width: 28rpx;height: 20rpx;margin-top: 30rpx;" />
				</view>
			</picker>
		</view>

		<view class="qiun-bg-white qiun-title-bar qiun-common-mt">
			<view class="qiun-title-dot-light">分水口流量统计（m³）</view>
		</view>
		<picker @change="bindPickerChange" :value="index" :range="array">
			<view class="uni-input" style="justify-content: center;display: flex;font-size: 30rpx;font-weight: bold;">
				{{array[index]}}
				<image src="../static/image/arrow_bottom.png" style="width: 21rpx;height: 14rpx;margin-top: 24rpx;" />
			</view>
		</picker>
		<view class="qiun-charts">
			<canvas canvas-id="canvasLineA" id="canvasLineA" class="charts" disable-scroll=true :width="cWidth*pixelRatio"
			 :height="cHeightLine*pixelRatio" :style="{'width':cWidth+'px','height':cHeightLine+'px'}" @touchstart="touchLineA"
			 @touchmove="moveLineA" @touchend="touchEndLineA"></canvas>
			<view style="padding: 0 20rpx;margin-bottom: 40rpx;">
				<view style="display: flex;text-align: center;">
					<view style="width:36%;background-color: #01B7FC;">
						<view style="font-size: 26rpx;border:  2rpx solid #dcdfe6;color: white;height: 52rpx;">
                            分水口
						</view>
						<view v-for="item in array" style="font-size: 26rpx;color: white;background-color: #01B7FC;
									border:  2rpx solid #dcdfe6;border-top-width: 0;">
							{{item}}
						</view>
					</view>
					<scroll-view enable-back-to-top show-scrollbar="false" style="flex-direction: row;width: 64%;white-space: nowrap"
					 scroll-x="true">
                     <view
                         style="display: inline-block;width: 20vw;border:  2rpx solid #dcdfe6;border-left-width: 0;border-bottom-width: 0;">
                     	<view style="font-size: 26rpx;color: white;border-bottom:  2rpx solid #dcdfe6;background: rgba(74, 125, 221,1);color: white;">
                     		管径
                     	</view>
                     	
                     	<view style="border-bottom:  2rpx solid #dcdfe6;color: gray;" v-for="it,index in array2">
                     		<view :style="{fontSize: '26rpx', borderWidth: 0,backgroundColor:index%2==1?'#FAFAFA':'white'}">
                     			{{it.gj||'-'}}
                     		</view>
                     	</view>
                     </view>
                     <view
                         style="display: inline-block;width: 20vw;border:  2rpx solid #dcdfe6;border-left-width: 0;border-bottom-width: 0;">
                     	<view style="font-size: 26rpx;color: white;border-bottom:  2rpx solid #dcdfe6;background: rgba(74, 125, 221,1);color: white;">
                     		设计规模
                     	</view>
                     	
                     	<view style="border-bottom:  2rpx solid #dcdfe6;color: gray;" v-for="it,index in array2">
                     		<view :style="{fontSize: '26rpx', borderWidth: 0,backgroundColor:index%2==1?'#FAFAFA':'white'}">
                     			{{it.sjgm||'-'}}
                     		</view>
                     	</view>
                     </view>
                     <view
                     v-if="times.length"
                         style="display: inline-block;width: 20vw;border:  2rpx solid #dcdfe6;border-left-width: 0;border-bottom-width: 0;">
                     	<view style="font-size: 26rpx;color: white;border-bottom:  2rpx solid #dcdfe6;background: rgba(74, 125, 221,1);color: white;">
                     		累计流量
                     	</view>
                     	
                     	<view style="border-bottom:  2rpx solid #dcdfe6;color: gray;" v-for="it,index in arrayids">
                     		<view :style="{fontSize: '26rpx', borderWidth: 0,backgroundColor:index%2==1?'#FAFAFA':'white'}" v-for="ss in all" v-if="it==ss.bh">
                     			{{ss.all||'-'}}
                     		</view>
                     	</view>
                     </view>
						<view v-for="item in times" 
                            style="display: inline-block;width: 14vw;border:  2rpx solid #dcdfe6;border-left-width: 0;border-bottom-width: 0;">
							<view style="font-size: 26rpx;color: white;border-bottom:  2rpx solid #dcdfe6;background: #01B7FC;color: white;">
								{{item+dw}}
							</view>
							
							<view style="border-bottom:  2rpx solid #dcdfe6;color: gray;" v-for="it,index in arrayids">
								<view :style="{fontSize: '26rpx', borderWidth: 0,backgroundColor:index%2==1?'#FAFAFA':'white'}" v-for="ss in all" v-if="it==ss.bh">
									{{ss.ss[item+dw]||'-'}}
								</view>  
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
		</view>
		<view style="width: 50vw;">
		     <view class="qiun-bg-white qiun-title-bar qiun-common-mt" >
		     							  <view class="qiun-title-dot-light">总累计流量（m³）</view>
		     </view>
		     <view class="value">{{zongleijiliuliang||0}}</view>
		 </view>
		<!-- <view class="qiun-bg-white qiun-title-bar qiun-common-mt">
			<view class="qiun-title-dot-light">压力曲线（M/P）</view>
		</view>
		<view class="qiun-charts">
			<canvas canvas-id="canvasArea" id="canvasArea" class="charts" :width="cWidth*pixelRatio" :height="cHeight*pixelRatio"
			 :style="{'width':cWidth+'px','height':cHeight+'px'}" @touchstart="touchArea"></canvas>
		</view> -->
	</scroll-view>
</template>

<script>
	import API from '@/common/api.js';
	import uCharts from '@/components/u-charts/u-charts.js';
	var _self,
		canvaLineA = null,
		canvaColumn = null,
		canvaArea = null;
	export default {
		data() {
			return {
				pzhAuthorization: uni.getStorageSync('pzhAuthorization'),
				zongleijiliuliang:0,
				zongleijiliuliangObj:{},
				array: [],
                array2: [],
				arrayids: [],
				index: 0,
				date: '',
				type: ['年', '月', '日'],
				times:[],
				dw:'',
				typeIndex: 0,
				all:[],
				cWidth: '',
				cHeight: '',
				cHeightLine: '',
				pixelRatio: 1,
				gaugeWidth: 15,
				"LineA": {
					"categories": [],
					"series": [{
						"name": "流量",
						"data": []
					}]
				},
				"Column": {
					"categories": ["6月", "7月", "8月", "9月", "10月", "11月"],
					"series": [{
						"name": "河门口水厂",
						"data": [45, 37, 43, 34, 34, 54]
					}, {
						"name": "大渡口水厂",
						"data": [30, 25, 14, 34, 18, 54]
					}]
				},
				"Area": {
					"categories": ["00:01", "00:02", "00:03", "00:04", "00:05", "00:06", "00:07", "00:08", "00:09", "00:10", "00:11",
						"00:12", "00:13",
						"00:14", "00:15", "00:16", "00:17", "00:18"
					],
					"series": [{
						"name": "压力",
						"data": [100, 80, 95, 150, 112, 132, 100, 80, 95, 150, 112, 132, 100, 80, 95, 150, 112, 132],
						"color": "#1890ff"
					}]
				},
			}
		},
		onLoad() {
			_self = this;
			this.cWidth = uni.upx2px(750);
			this.cHeightLine = uni.upx2px(500) // uni.getSystemInfoSync().windowHeight//  uni.upx2px(500);
			this.cHeight = uni.upx2px(500);
			this.selectRelation()
			this.getServerData()
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		methods: {
			bindDateChange(e) {
				this.date = e.target.value
				this.getFSKUsed()
				console.log(this.date)
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'end') {
					// year = year - 60;
				} else if (type === 'start') {
					return '2000-01-01'
				}
				month = month > 9 ? month : '0' + month;;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			selectRelation() {
				API.selectRelation({
					pzhAuthorization: this.pzhAuthorization,
					type: '流量累计',
					sblx:'scdd_sblx_002'
				}).then(res => {
					if (res.resCode == 'success') {
                        console.log(res,4111)
						uni.hideLoading()
						res.datas.forEach(item => {
							this.array.push(item.sbmc.substring(item.sbmc.indexOf('#') + 1, item.sbmc.length))
							this.array2.push({sbmc:item.sbmc.substring(item.sbmc.indexOf('#') + 1, item.sbmc.length),gj:item.gj,sjgm:item.sjgm})
							this.arrayids.push(item.bh)
							this.zongleijiliuliangObj[item.bh]=0
						})
						
						this.typeChange({
							target: {
								value: 2
							}
						})
					}
				})
			},
			getFSKUsed() {
				
				let type = 'day',
					dw = '时',
					time_v_s = this.date + ' 00:00:00',
					time_v_end = this.date + ' 23:59:59',
					times=['0','01','02','03','04','05','06','07','08','09','10','11','12',
					'13','14','15','16','17','18','19','20','21','22','23']
				if (this.typeIndex == 0) {
					type = 'year'
					time_v_s = this.date + '-01-01 00:00:00'
					time_v_end = this.date + '-12-31 23:59:59'
					dw = '月'
					times=['01','02','03','04','05','06','07','08','09','10','11','12']
				} else if (this.typeIndex == 1) {
					type = 'month'
					time_v_s = this.date + '-01 00:00:00'
					let time = new Date(this.date)
					let num = new Date(time.getFullYear(), time.getMonth() + 1, 0).getDate()
					time_v_end = this.date + '-' + num + ' 23:59:59'
					dw = '日'
					times=[]
					for(let i=1;i<=num;i++){
						times.push(i<10?('0'+i):(i+''))
					}
				}
				this.dw=dw
				console.log(type,time_v_s,time_v_end)
				API.getFSKUsed({
					type,
					time_v_s,
					time_v_end,
					pzhAuthorization: this.pzhAuthorization,
					// pointname: this.arrayids[this.index]
				}).then(res => {
					if (res.resCode == 'success') {
						if(this.array[this.array.length-1]=='总计'){
							this.array.splice(this.array.length-1,1)
							this.array2.splice(this.array2.length-1,1)
							this.arrayids.splice(this.arrayids.length-1,1)
						}
						uni.hideLoading()
						let all=[];
							res.datas.forEach((item, index) => {
								if(this.zongleijiliuliangObj[item.bh]!=undefined){
									this.zongleijiliuliangObj[item.bh]=this.changeNum(item.value||0)
								}
								let flag=true
								all.forEach(it=>{
									if(it.bh==item.bh){
										flag=false
										let s=(item.time_v.substring(item.time_v.length - 2, item.time_v.length)=='00'?'0':item.time_v.substring(item.time_v.length - 2, item.time_v.length))
											 + dw
										it.categories.push(
											s
										)
										it.data.push(
											this.changeNum(item.value)-it.num
										)
										it.ss[s]=this.changeNum(item.value)-it.num
										it.num=this.changeNum(item.value)
                                        if(it.num){
                                            it.all=it.num-it.one
                                        }
									}
								})
								if(flag){
									all.push({
										bh:item.bh,
										categories:[],
										num:this.changeNum(item.value),
										one:this.changeNum(item.value)||0,
                                        all:0,
										data:[],
										ss:{},
									})
								}
							})
							this.arrayids.forEach(item=>{
								let flag=true
								all.forEach(it=>{
									if(it.bh==item){
										flag=false
									}
								})
								if(flag){
									all.push({
										bh:item,
										categories:[],
										data:[],
										ss:{},
									})
								}
							})
						
						let zongji={
							bh:'zongji',
							categories:[],
							data:[],
							ss:{},
							all:0
						}	
						all.forEach(item=>{
							item.categories.forEach(it=>{
								if(zongji.categories.indexOf(it)<0){
									zongji.categories.push(it)
								}
							})
						})  
						all.forEach(item=>{
							zongji.all+=item.all||0
							zongji.categories.forEach(it=>{
								zongji.ss[it]=(zongji.ss[it]||0)+(item.ss[it]||0)
							})
						})
						console.log(zongji,'zongjizongji');
						all.push(zongji)	
						this.all=all
						this.times=times
						console.log(all,'all');
						
						this.array.push('总计')
						this.array2.push({sbmc:'',gj:'',sjgm:''})
						this.arrayids.push('zongji')
						this.zongleijiliuliang=0
						for(let key in this.zongleijiliuliangObj){
							this.zongleijiliuliang+=Number(this.zongleijiliuliangObj[key]||0) 
						}
						this.changeLineA()
					}
				})
			},
			changeLineA(){
				let flag=true
				this.all.forEach(item => {
					if(this.arrayids[this.index]==item.bh){
						flag=false
						this.LineA.categories =item.categories
						this.LineA.series[0].data = item.data
						canvaLineA.updateData(this.LineA)
					}
				})
				if(flag){
					this.LineA.categories =[]
					this.LineA.series[0].data = []
					canvaLineA.updateData(this.LineA)
				}
			},
			changeNum(num) {
				return Number(Math.floor(Number(num) * 100) / 100).toFixed(2)
			},
			bindPickerChange(e) {
				this.index = e.target.value || 0
				this.changeLineA()
			},
			typeChange(e) {
				this.typeIndex = e.target.value || 0
				let time = new Date()
				if (this.typeIndex == 0) {
					this.date = time.getFullYear()
				} else if (this.typeIndex == 1) {
					let month = time.getMonth() + 1
					this.date = time.getFullYear() + '-' + (month > 9 ? month : ('0' + month))
				} else {
					let month = time.getMonth() + 1,
						day = time.getDate();
					this.date = time.getFullYear() + '-' + (month > 9 ? month : ('0' + month)) + '-' + (day > 9 ? day : ('0' + day))
				}
				console.log(this.date, 11111)
				this.getFSKUsed()
			},
			getServerData() {
				let LineA = {
					categories: [],
					series: []
				};
				//这里我后台返回的是数组，所以用等于，如果您后台返回的是单条数据，需要push进去
				LineA.categories = this.LineA.categories;
				LineA.series = this.LineA.series;

				_self.showLineA("canvasLineA", LineA);

				let Column = {
					categories: [],
					series: []
				};
				//这里我后台返回的是数组，所以用等于，如果您后台返回的是单条数据，需要push进去
				Column.categories = this.Column.categories;
				Column.series = this.Column.series;
				_self.showColumn("canvasColumn", Column);


				let Area = {
					categories: [],
					series: []
				};
				//这里我后台返回的是数组，所以用等于，如果您后台返回的是单条数据，需要push进去
				Area.categories = this.Area.categories;
				Area.series = this.Area.series;
				_self.showArea("canvasArea", Area);
			},
			showArea(canvasId, chartData) {
				canvaArea = new uCharts({
					$this: _self,
					canvasId: canvasId,
					type: 'area',
					fontSize: 11,
					padding: [0, 15, 10, 15],
					legend: {
						show: true,
						position: 'top',
						float: 'center',
						itemGap: 30,
						padding: 5,
						lineHeight: 18,
						margin: 0,
					},
					dataLabel: false,
					dataPointShape: true,
					background: '#FFFFFF',
					pixelRatio: _self.pixelRatio,
					categories: chartData.categories,
					series: chartData.series,
					animation: true,
					xAxis: {
						disabled: true,
						type: 'grid',
						gridColor: '#CCCCCC',
						gridType: 'dash',
						dashLength: 8,
					},
					yAxis: {
						gridType: 'dash',
						gridColor: '#CCCCCC',
						dashLength: 8,
						splitNumber: 5,
					},
					width: _self.cWidth * _self.pixelRatio,
					height: _self.cHeight * _self.pixelRatio,
					extra: {
						area: {
							type: 'curve',
							opacity: 0.2,
							addLine: true,
							width: 2,
							gradient: false
						}
					}
				});
			},
			showColumn(canvasId, chartData) {
				canvaColumn = new uCharts({
					$this: _self,
					canvasId: canvasId,
					type: 'column',
					legend: true,
					fontSize: 11,
					background: '#FFFFFF',
					pixelRatio: _self.pixelRatio,
					animation: true,
					categories: chartData.categories,
					series: chartData.series,
					xAxis: {
						disableGrid: true,
					},
					yAxis: {
						//disabled:true
					},
					dataLabel: true,
					width: _self.cWidth * _self.pixelRatio,
					height: _self.cHeight * _self.pixelRatio,
					extra: {
						column: {
							type: 'group',
							width: _self.cWidth * _self.pixelRatio * 0.45 / chartData.categories.length
						}
					}
				});
			},
			touchColumn(e) {
				canvaColumn.touchLegend(e, {
					animation: true
				});
			},
			showLineA(canvasId, chartData) {
				canvaLineA = new uCharts({
					$this: _self,
					canvasId: canvasId,
					type: 'line',
					fontSize: 11,
					legend: true,
					dataLabel: true,
					dataPointShape: true,
					background: '#FFFFFF',
					pixelRatio: _self.pixelRatio,
					categories: chartData.categories,
					series: chartData.series,
					animation: false,
					enableScroll: true, //开启图表拖拽功能
					// rotate:true, //横屏
					xAxis: {
						disableGrid: false,
						type: 'grid',
						gridType: 'dash',
						itemCount: 10,
						scrollShow: true,
						scrollAlign: 'left',
						scrollBackgroundColor: '#F7F7FF',
						scrollColor: '#DEE7F7',
					},
					yAxis: {
						//disabled:true
						gridType: 'dash',
						splitNumber: 8,
						min: 10,
						max: 180,
						format: (val) => {
							return val.toFixed(0)
						}
					},
					width: _self.cWidth * _self.pixelRatio,
					height: _self.cHeightLine * _self.pixelRatio,
					extra: {
						line: {
							type: 'curve'
						},
						lineStyle: 'straight'
					},
				});
			},
			touchLineA(e) {
				canvaLineA.scrollStart(e);
				canvaLineA.touchLegend(e, {
					animation: true
				});
			},
			moveLineA(e) {
				canvaLineA.scroll(e);
			},
			touchEndLineA(e) {
				canvaLineA.scrollEnd(e);
				//下面是toolTip事件，如果滚动后不需要显示，可不填写
				canvaLineA.showToolTip(e, {
					format: function(item, category) {
						return category + ' ' + item.name + ':' + item.data
					}
				});
			},
			touchArea(e) {
				canvaArea.touchLegend(e);
				canvaArea.showToolTip(e, {
					format: function(item, category) {
						return category + ' ' + item.name + ':' + item.data
					}
				});
			},
		}
	}
</script>

<style lang="less" scoped>
    /* #ifndef APP-NVUE */
    body {
    	font-size: 30rpx;
    	line-height: 2em;
    	color: #333;
    	font-family: Helvetica Neue, Helvetica, sans-serif;
    }
    
    view,
    text {
    	font-size: 30rpx;
    	line-height: 2em;
    	color: #333;
    }
    
    page {
    	background: #fff;
    }
    
    button {
    	width: 100%;
    }
    /* #endif */
	.content {
		height: 100vh;
        background: white;
		.qiun-common-mt {
			margin-top: 10upx;
		}

		.qiun-bg-white {
			background: #FFFFFF;
		}

		.qiun-title-bar {
			width: 96%;
			padding: 10upx 2%;
			flex-wrap: nowrap;
		}

		.qiun-title-dot-light {
			border-left: 10upx solid #0ea391;
			padding-left: 10upx;
			font-size: 32upx;
			color: #000000
		}
		.value {
		  padding-left: 20rpx;
		  font-size: 50rpx;
		  line-height: 100rpx;
		  font-weight: bold;
		  color: rgba(74, 125, 221, 1);
		}
	}
</style>
